<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 点击提交数据 -->
    <!-- 阻止浏览器的默认行为 (表单默认提交) -->
    <form action="" onsubmit="return false">
        <p><label for="">用户名:</label><input type="text" name="user"></p>
        <p><label for="">密&emsp;码:</label><input type="text" name="pwd"></p>
        <p>
        <select name="" id="year">
            <option value="2001">2001</option>
            <option value="2002">2002</option>
            <option value="2003">2003</option>
            <option value="2004">2004</option>
            <option value="2005">2005</option>
            <option value="2006">2006</option>
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
            <option value="2021">2021</option>
        </select>
        </p>
        <p>
            <input type="submit" class="subBtn" value="注册">
            <input type="reset" class="canBtn" value="取消">
        </p>
    </form>
</body>
<script>
    // 表单相关的事件

    // onfocus   表单元素聚焦时触发
    // onblur    表单元素失焦时触发
    // onchange  表单元素内容改变时触发   (a. 表单内容需要改变 b. 失焦 / 按enter键)
    //           在下拉框中使用  下拉框选项切换时触发

    // oninput   即时输入(表单元素内容改变时触发)

    // onsubmit  表单提交时触发 (绑定给表单元素 由提交按钮/enter键 触发)
    // onreset   表单重置时触发 (绑定给表单元素 由重置按钮触发)

    var form = document.getElementsByTagName("form")[0];
    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var yearSel = document.getElementById("year");


    var subBtn = document.getElementsByClassName("subBtn")[0];
    var canBtn = document.getElementsByClassName("canBtn")[0];


    userInp.onfocus = function(){
        console.log("表单聚焦 focus");
        this.style.color = 'red';
        
    }
    // userInp.onblur = function(){
    //     console.log("表单失焦 blur");
    //     this.style.color = '#000';

    //     var user = userInp.value.trim();
    //     if(user.length>=6&&user.length<=18){
    //         console.log("√");
    //     }else{
    //         console.log("用户名需要在6-18位");
    //     }
    // }

    userInp.onchange = function(){
        console.log("表单内容改变 change");
        this.style.color = '#000';

        var user = userInp.value.trim();
        if(user.length>=6&&user.length<=18){
            console.log("√");
        }else{
            console.log("用户名需要在6-18位");
        }
    }

    yearSel.onchange = function(){
        console.log(this.value,this.selectedIndex);
    }

    //  userInp.oninput = function(){
    //     console.log("表单内容改变 input");
    //     this.style.color = '#000';

    //     var user = userInp.value.trim();
    //     if(user.length>=6&&user.length<=18){
    //         console.log("√");
    //     }else{
    //         console.log("用户名需要在6-18位");
    //     }
    // }


    // form.onsubmit = function(){
    //     console.log("数据提交成功 submit");
    //     return false;  // 阻止浏览器的默认行为 (表单默认提交)
    // }
    form.onreset = function(){
        console.log("数据重置成功 reset");
    }

</script>
</html>